<template>
    <div>
        <ve-line :data="chartData" :data-zoom="dataZoom"></ve-line>
        <mt-switch class="fullWidth" v-model="checkHistory">{{switchText}}</mt-switch>
        <mt-button class="fullWidth" type="primary" @click="changeFilterData(1)">1分图</mt-button>
        <mt-button class="fullWidth" type="primary" @click="changeFilterData(2)">2分图</mt-button>
        <mt-button class="fullWidth" type="primary" @click="changeFilterData(3)">3分图</mt-button>
        <mt-button class="fullWidth" type="primary" @click="changeFilterData(5)">5分图</mt-button>
    </div>

</template>
<style scoped>
.fullWidth{
  width:100%;
  margin-bottom: 10px;
}
</style>

<script>
    //这个图表控件，如果要用缩放，需要引入dataZoom
    import 'echarts/lib/component/dataZoom'
    //时间处理工具
    import moment from 'moment'
    //从可读性、复用性出发，把日期数据处理抽离出去
    import {filterDataUtil,postDataFilter} from './util/function'

    import axios from 'axios'
    export default {
        data : function () {
            return {
                sourceData: [],
                curt: 0,
                timer: null,
                checkHistory: false,
                filterData: {
                    unit: "m",
                    value: 1
                }
            }
        },
        computed : {
            switchText: function () {
                return this.checkHistory
                    ? "实时数据"
                    : "历史数据"
            },
            dataZoom: function () {
                return this.checkHistory
                    ? undefined
                    : [
                        {
                            type: 'inside',
                            start: 80,
                            end: 100
                        },
                        {
                            type: 'slider',
                            start: 80,
                            end: 100
                        }
                    ]
            },
            chartData: function () {
                return {
                    columns: [
                        '时间', '数值'
                    ],
                    rows: filterDataUtil(this.sourceData, this.filterData)
                }
            }
        },
        watch : {
            checkHistory: function (val) {
                let that = this;
                if (val) {
                    this.timer = setInterval(() => {
                        that.addOne();
                        that.curt++;
                    }, 5000)
                } else {
                    clearInterval(this.timer)
                }
            }
        },

        created() {
          axios.post(`/allmarket?scope=all&op=water`,null)
            .then(res=>{
                this.sourceData = postDataFilter(JSON.parse(res.data))
                console.log('res=>',postDataFilter(JSON.parse(res.data)));            
            }).catch(err=>{
                console.log(err)
            })
        },
        methods : {
            changeFilterData(index) {
                this.filterData = {
                    unit: "m",
                    value: index
                }
            },
            switchTab() {
                this.checkHistory = !this.checkHistory
            },
            addOne() {
                axios.post(`/allmarket?scope=last&op=water`,null)
            .then(res=>{
                for(var i in res.data){
                    const thisData = {
                        '时间': moment(i,'YYYYMMDD-HHmmss'),
                        '数值':res.data[i].water
                    }
                    const lastobj = this.sourceData[this.sourceData.length-1]
                    if(lastobj['时间']==thisData['时间']){
                        this.sourceData.pop();
                        this.sourceData.push(thisData)
                    }
                }
                
                            
            }).catch(err=>{
                console.log(err)
            })
                
            }
        }
    }
</script>